<template>
  <div class="lg:w-3/4">
    <!-- 分类详情头部 -->
    <div
      class="bg-white rounded-xl shadow-md p-6 mb-8 scroll-animate"
      style="animation-delay: 0.2s"
    >
      <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h3 class="text-2xl font-bold text-primary mb-2">
            {{ currentCategory?.name || '全部拍品' }}
          </h3>
          <p class="text-gray-600">
            {{ currentCategory?.description || '浏览所有类别的精选拍品，找到您心仪的收藏' }}
          </p>
        </div>

        <el-select
          v-model="localSortType"
          placeholder="排序方式"
          class="w-[180px] custom-select"
          size="default"
        >
          <el-option value="recommend" label="推荐排序" />
          <el-option value="price-asc" label="价格从低到高" />
          <el-option value="price-desc" label="价格从高到低" />
          <el-option value="newest" label="最新上架" />
        </el-select>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="flex justify-center items-center py-20" v-loading="true">
      <!-- <el-loading-spinner class="text-primary" /> -->
    </div>

    <!-- 分类拍品网格 -->
    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <ProductItem
        v-for="(item, index) in filteredItems"
        :key="item.id"
        :item="item"
        :animation-delay="(index % 6) * 0.1"
        @toggle-favorite="$emit('toggle-favorite', item.id)"
      />
    </div>

    <!-- 空状态 -->
    <div
      v-if="filteredItems.length === 0 && !isLoading"
      class="text-center py-16 bg-white rounded-xl shadow-md mt-6"
    >
      <i class="fa fa-search text-4xl text-gray-300 mb-4"></i>
      <h3 class="text-xl font-medium text-gray-700 mb-2">未找到符合条件的拍品</h3>
      <p class="text-gray-500 mb-6">请尝试调整筛选条件或浏览其他分类</p>
      <button
        class="bg-primary text-white font-medium px-6 py-2 rounded-lg hover:bg-primary-dark transition-colors"
        @click="$emit('reset-filters')"
      >
        重置筛选条件
      </button>
    </div>

    <!-- 加载更多 -->
    <div v-if="filteredItems.length > 0 && !isLoading" class="text-center mt-12 scroll-animate">
      <button
        class="bg-white border border-primary text-primary hover:bg-primary hover:text-white font-medium px-8 py-3 rounded-lg transition-all duration-300 flex items-center gap-2 mx-auto"
        @click="$emit('load-more')"
        :disabled="isLoadingMore"
      >
        <span>{{ isLoadingMore ? '加载中...' : '加载更多拍品' }}</span>
        <i class="fa fa-refresh" :class="{ 'fa-spin': isLoadingMore }"></i>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, watch } from 'vue'
import { ElSelect, ElOption } from 'element-plus'
import ProductItem from './ProductItem.vue'
import { type Category, type ProductItem as ProductItemType } from '../type'

// 定义props
const props = defineProps<{
  currentCategory: Category | undefined
  filteredItems: ProductItemType[]
  sortType: 'recommend' | 'price-asc' | 'price-desc' | 'newest'
  isLoading: boolean
  isLoadingMore: boolean
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'sort-change', type: 'recommend' | 'price-asc' | 'price-desc' | 'newest'): void
  (e: 'load-more'): void
  (e: 'toggle-favorite', id: number): void
  (e: 'reset-filters'): void
}>()

// 本地排序状态
const localSortType = ref<typeof props.sortType>(props.sortType)

// 监听排序变化
watch(localSortType, (newVal) => {
  emit('sort-change', newVal)
})

// 监听 prop 排序变化
watch(
  () => props.sortType,
  (newVal) => {
    localSortType.value = newVal
  }
)
</script>

<style scoped>
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-primary-dark {
  background-color: var(--primary-dark);
}

/* 自定义Element Select样式 */
:deep(.custom-select .el-select__wrapper) {
  border-radius: 8px;
  border-color: #e2e8f0;
  padding: 2px 12px;
  height: 40px;
}

:deep(.custom-select .el-select__placeholder) {
  color: #94a3b8;
}

:deep(.custom-select .el-select__input) {
  color: #1a365d;
}

:deep(.custom-select .el-select__arrow) {
  color: #1a365d;
}
</style>
